<div id="header" align="center">

    <div id="navigate_tabs" align="center">
        <ul id="navigate_tabs_ul">
            <li id="logo">
                <a href="/">
                    <img id="logo_image" src="{{STATIC_URL}}images/logo.png"/>
                </a>
            </li>
            <li class="{{ main_menu.submit }} click">
                <a href="/">SUBMIT</a>
                <div class="arrow"></div>
            </li>
            <li class="{{ main_menu.live }} click">
                <a href="/live/popular/">LIVE</a>
                <div class="arrow"></div>
            </li>
            {% comment %}
            <li class="{{ main_menu.upnext }}">
                <a class="click" href="/upnext">UP NEXT</a>
                <div class="arrow"></div>
            </li>
            {% endcomment %}
            <li id="login_box">
                {% if user.is_authenticated %}
                    <div class="drop_down_menu">
                        <div class="login_box_name">
                            {{ user.short_username }}
                        </div>
                        <div class="login_box_live_items">
                            {% with live_current=user.live_current %}
                                <strong>{{ live_current }}</strong>
                                 Live item{% if live_current > 1 %}s{% endif %}
                            {% endwith %}
                        </div>
                    </div>
                    {% if user.avatar %}
                        <img id="header_avatar" src="{{ user.avatar.url }}">
                    {% else %}
                        <img id="header_avatar" src="{{ STATIC_URL }}/images/default.jpg">
                    {% endif %}
                    <div class="triangle_gray"></div>
                    <ul id="drop-down">
                    	<li>
                            <span id="airtime_count">
                                {%  with airtime=user.airtime %}
                                    <strong>{{ airtime }}</strong> airtime{% if airtime > 1 %}s{% endif %}
                                    </span>
                                    {% if airtime == 0 %}
                                        <strong>&bull;</strong>&nbsp;
                                        <a class="restore_airtime" href="#">Recharge now&nbsp;</a>
                                    {% endif %}
                                {% endwith %}
                        </li>
                        <li>
                            <a href="/user/{{ user.username }}">My Items</a>
                        </li>
                        <li>
                            <a href="/profile">Profile</a>
                        </li>
                        <li id="notification_link">
                            <a href="/notifications">Notifications</a>
                            {% with notifications_count=user.get_notifications_count %}
                                {% if notifications_count > 0 %}
                                    <span id="notification_count">{{ user.get_notifications_count }}</span>
                                {% endif %}
                            {% endwith %}
                        </li>
                        <li>
                            {% if user.get_google_tokens %}
                                <a href="/google_contacts/">
                            {% else %}
                                <a href="/associate/google-oauth/?next=/google_contacts/">
                            {% endif %}
                            Invite People to Join</a><span class="icon_new"></span>
                        </li>
                        <li>
                            <a href="/logout">Logout</a>
                        </li>
                    </ul>
                {% else %}
                    <a id="facebook_login" href="/login/facebook">
                        <img id="login_box_facebook" src="{{ STATIC_URL }}images/fb-connect-large.png">
                    </a>
                {% endif %}
            </li>
            {% comment %}
            <li id="header_search">
                <input placeholder="Search people, items..." name="search_string" maxlength="256"/>
                <span class="icon_search"></span>
            </li>
            {% endcomment %}
        </ul>
    </div>
</div>
